import React from 'react';
import PropTypes from 'prop-types';
import routes from './routes';
import {Button, Form, Row, Col, Card, Spin, Table, Popconfirm} from 'antd';
import {TABLE, FIXED_COLUMN_WIDTH, DATE_FORMAT} from '../constants';
import Return from '../common/Return';
import {injectIntl, language} from './intl';
import * as api from './api';
import FormItem from 'antd/lib/form/FormItem';
import {hasPermissions} from './utils';
import {PERMISSIONS} from './constants';
import TextInput from 'Shared/components/TextInput';
import {formatDateTime} from '../utils';
import {newOrUpdateOrderValidator} from './validator';
import WrappedSelect from '../common/WrappedSelect';
import {agentKind, dealerType, dealerExtendAuthorisedMethod, dealerExtendOnlineStatus} from '../Enum';
import RegionSelect from '../common/RegionSelect';
import WrappedDatePicker from '../common/WrappedDatePicker';
import PersonnelSelectPanel from './PersonnelSelectPanel';
const authorisedMethodList = dealerExtendAuthorisedMethod.toList(language);
const onlineStatusList = dealerExtendOnlineStatus.toList(language);
const dealerTypeList = dealerType.toList(language);
const agentKindList = agentKind.toList(language);
const FORM_ITEM_LAYOUT_OPTIONS = Object.freeze({
    labelCol: {
        xxl: {span: 9},
        xl: {span: 12},
        md: {span: 11}
    },
    wrapperCol: {
        xxl: {span: 15},
        xl: {span: 12},
        md: {span: 13}
    }
});
const FORM_ITEM_COLON = true;
const FORM_OPTIONS = Object.freeze({
    /* Col 参数 */
    col: Object.freeze({
        xl: 8,
        md: 12
    }),
    /* Form 参数*/
    item: Object.freeze({
        ...FORM_ITEM_LAYOUT_OPTIONS,
        colon: FORM_ITEM_COLON
    })
});

export class UpdatePanel extends React.PureComponent {
    state = {
        loading: false,
        hasOperat: false,
        validate: false,
        data: {region: []},
        personnels: [],
        dealerExtend: {},
        showPersonnelSelectPanel: false,

    };

    componentDidMount() {
        const id = this.props.id;
        this.setState({loading: true});
        api.getDetail(id)
            .then(res => {
                if(res.ok) {
                    const data = res.data;
                    const region = [];
                    if(data.areaTiledId)
                        region.push(data.areaTiledId);
                    if(data.countryId)
                        region.push(data.countryId);
                    if(data.provinceId)
                        region.push(data.provinceId);
                    if(data.cityId)
                        region.push(data.cityId);
                    data.region = region;
                    this.setState({
                        loading: false,
                        data: res.data,
                        dealerExtend: res.data.dealerExtend,
                        personnels: res.data.personnels || [],
                    });
                } else
                    this.setState({loading: false});
            });
    }
    componentWillUnmount() {
        this.isunmount = true;
    }
    onClickReturnBtn = () => {
        this.props.onCancel();
    }
    onSubmit = () => {
        const {data, dealerExtend, personnels} = this.state;
        data.areaTiledId = data.region ? data.region.slice(-1)[0] : null;
        const isValid = newOrUpdateOrderValidator(data);
        
        if(!isValid) {
            this.setState({
                validate: true
            });
            return;
        }
        const condition = {
            shortCode: data.shortCode,
            shortName: data.shortName,
            areaTiledId: data.areaTiledId,
            contactNumber: data.contactNumber,
            type: data.type,
            kind: data.kind,
            status: data.status,
            fax: data.fax,
            email: data.email,
            address: data.address,
            zipCode: data.zipCode,
            rowVersion: data.rowVersion,
            dealerExtend: {
                juridicalPerson: dealerExtend && dealerExtend.juridicalPerson,
                juridicalPersonPhone: dealerExtend && dealerExtend.juridicalPersonPhone,
                juridicalPersonEmail: dealerExtend && dealerExtend.juridicalPersonEmail,
                generalManager: dealerExtend && dealerExtend.generalManager,
                generalManagerPhone: dealerExtend && dealerExtend.generalManagerPhone,
                generalManagerEmail: dealerExtend && dealerExtend.generalManagerEmail,
                salesDirector: dealerExtend && dealerExtend.salesDirector,
                salesDirectorPhone: dealerExtend && dealerExtend.salesDirectorPhone,
                salesDirectorEmail: dealerExtend && dealerExtend.salesDirectorEmail,
                serviceDirector: dealerExtend && dealerExtend.serviceDirector,
                serviceDirectorPhone: dealerExtend && dealerExtend.serviceDirectorPhone,
                serviceDirectorEmail: dealerExtend && dealerExtend.serviceDirectorEmail,
                marketDirector: dealerExtend && dealerExtend.marketDirector,
                marketDirectorPhone: dealerExtend && dealerExtend.marketDirectorPhone,
                marketDirectorEmail: dealerExtend && dealerExtend.marketDirectorEmail,
                financialController: dealerExtend && dealerExtend.financialController,
                financialControllerPhone: dealerExtend && dealerExtend.financialControllerPhone,
                financialControllerEmail: dealerExtend && dealerExtend.financialControllerEmail,
                salesInterfacePerson: dealerExtend && dealerExtend.salesInterfacePerson,
                salesInterfacePhone: dealerExtend && dealerExtend.salesInterfacePhone,
                salesInterfaceEmail: dealerExtend && dealerExtend.salesInterfaceEmail,
                serviceInterfacePerson: dealerExtend && dealerExtend.serviceInterfacePerson,
                serviceInterfacePhone: dealerExtend && dealerExtend.serviceInterfacePhone,
                serviceInterfaceEmail: dealerExtend && dealerExtend.serviceInterfaceEmail,
                incorporatedDate: dealerExtend && dealerExtend.incorporatedDate,
                startTime: dealerExtend && dealerExtend.startTime,
                authorisedMethod: dealerExtend && dealerExtend.authorisedMethod,
                authorisedArea: dealerExtend && dealerExtend.authorisedArea,
                arrivedAddress: dealerExtend && dealerExtend.arrivedAddress,
                openDate: dealerExtend && dealerExtend.openDate,
                onlineStatus: dealerExtend && dealerExtend.onlineStatus,
                updatedDate: dealerExtend && dealerExtend.updatedDate,
            },
            personnels: personnels && personnels.map(v => ({
                id: v.id,
            }))
        };
        this.setState({loading: true});
        api.modify(data.id, condition).then(res => {
            if(res.ok)
                this.props.successReturn();
            if(!this.ok)
                this.setState({loading: false});
        });
    };
    onDeleteAddedItem = e => {
        const addedItemId = e.target.dataset.id;
        const tmp = this.state.personnels.filter(d => d.id !== addedItemId);
        this.setState({
            personnels: [...tmp],
            hasOperat: true
        });
    }
    onDeleteAll = () => {
        this.setState({
            personnels: [],
            hasOperat: true
        });
    }
    onClosePersonnelSelectPanel= () => {
        this.setState({showPersonnelSelectPanel: false});
    }
    onClickSearchPersonnelBtn = () => {
        this.setState({
            showPersonnelSelectPanel: true,
        });
    }
    onSelectAddedPersonnel = records => {
        const addedItems = this.state.personnels || [];
        records.forEach(r => {
            const index = addedItems.findIndex(v => v.id === r.id);
            if(index === -1)
                addedItems.push({
                    id: r.id,
                    userName: r.userName,
                    name: r.name,
                });
        });
        this.setState({
            personnels: [...addedItems],
            hasOperat: true,
            showPersonnelSelectPanel: false
        });
    }
    onChange = (value, name) => {
        const data = Object.assign({}, this.state.data, {
            [name]: value
        });
        this.setState({
            data,
            hasOperat: true
        });
    }
    onChangeDealerExtend = (value, name) => {
        const dealerExtend = Object.assign({}, this.state.dealerExtend, {
            [name]: value
        });
        this.setState({
            dealerExtend,
            hasOperat: true
        });
    }
    render() {
        const {data, personnels, dealerExtend} = this.state;
        const {formatMessage} = this.props.intl;
        const {pagePermission} = this.props;
        const validateRegionId = !(data.region.length > 0) && this.state.validate ? 'error' : null;
        const regionSelectDefaultOption = {
            areaTiledId: data.areaTiledId,
            areaName: data.area,
            countryId: data.countryId,
            countryName: data.country,
            provinceId: data.provinceId,
            provinceName: data.province,
            cityId: data.cityId,
            cityName: data.city
        };
        const validateCode = !data.code && this.state.validate ? 'error' : null;
        const validateName = !data.name && this.state.validate ? 'error' : null;
        const validateDealerCode = !data.code && this.state.validate ? 'error' : null;
        const validateShortCode = /^[A-Z]{2}$/.test(data.shortCode) ? null : 'error';
        const submitable = hasPermissions(PERMISSIONS.add, pagePermission);
        const colums = [{
            title: formatMessage({
                id: 'editPanel.column.userName',
                defaultMessage: '用户名'
            }),
            dataIndex: 'userName',
        }, {
            title: formatMessage({
                id: 'editPanel.column.name',
                defaultMessage: '姓名'
            }),
            dataIndex: 'name',
        }, {
            title: data.personnels && data.personnels.length > 0
                ? (
                    <Popconfirm placement="topRight" title={formatMessage({
                        id: 'editPanel.column.allDelete',
                        defaultMessage: '是否确认全部删除？'
                    })} onConfirm={this.onDeleteAll} >
                        <a>{formatMessage({
                            id: 'editPanel.column.empty',
                            defaultMessage: '清空'
                        })}</a>
                    </Popconfirm>
                )
                : <a>{formatMessage({
                    id: 'editPanel.column.empty',
                    defaultMessage: '清空'
                })}</a>,
            dataIndex: 'id',
            fixed: 'right',
            width: FIXED_COLUMN_WIDTH,
            render: text => <a data-id={text} onClick={this.onDeleteAddedItem}>{formatMessage({
                id: 'editPanel.column.delete',
                defaultMessage: '删除'
            })}</a>
        }];
        return (
            <div className="form-standard">
                <Spin spinning={this.state.loading}>
                    <Form>
                        <Card title={formatMessage({
                            id: 'editPanel.column.dealer',
                            defaultMessage: '总代基础信息'
                        })}>
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'editPanel.operation.Code',
                                        defaultMessage: '编号'
                                    })} {...FORM_OPTIONS.item}
                                    validateStatus={validateCode}
                                    required>
                                        {data.code}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'editPanel.operation.Name',
                                        defaultMessage: '名称'
                                    })} {...FORM_OPTIONS.item}
                                    validateStatus={validateName}
                                    required>
                                        {data.name}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'editPanel.operation.shortCode',
                                        defaultMessage: '简码'
                                    })} {...FORM_OPTIONS.item}
                                    validateStatus={validateShortCode}
                                    required>
                                        <TextInput
                                            name="shortCode"
                                            value={data.shortCode}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'editPanel.operation.shortName',
                                        defaultMessage: '简称'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="shortName"
                                            value={data.shortName}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'editPanel.operation.kind',
                                        defaultMessage: '客户分类'
                                    })} {...FORM_OPTIONS.item} required>
                                        <WrappedSelect
                                            allowClear
                                            name="kind"
                                            options={agentKindList}
                                            value={data.kind}
                                            onChange={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'editPanel.operation.type',
                                        defaultMessage: '客户类型'
                                    })} {...FORM_OPTIONS.item} required>
                                        <WrappedSelect
                                            allowClear
                                            name="type"
                                            options={dealerTypeList}
                                            value={data.type}
                                            onChange={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'editPanel.operation.areaTiledId',
                                        defaultMessage: '国省市'
                                    })}{...FORM_OPTIONS.item}
                                    validateStatus={validateRegionId} required>
                                        <RegionSelect
                                            name="region"
                                            defaultOption={regionSelectDefaultOption}
                                            value={data.region}
                                            onChange={this.onChange}
                                            changeOnSelect={true} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'editPanel.operation.contactNumber',
                                        defaultMessage: '联系电话'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="contactNumber"
                                            value={data.contactNumber}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'editPanel.operation.fax',
                                        defaultMessage: '传真'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="fax"
                                            value={data.fax}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'editPanel.operation.email',
                                        defaultMessage: '电子邮箱'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="email"
                                            value={data.email}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'editPanel.operation.address',
                                        defaultMessage: '联系地址'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="address"
                                            value={data.address}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'editPanel.operation.zipCode',
                                        defaultMessage: '邮政编码'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="zipCode"
                                            value={data.zipCode}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                
                            </Row>
                        </Card>
                        {
                            dealerExtend && <Card title={formatMessage({
                                id: 'editPanel.column.dealerExtend',
                                defaultMessage: '总代扩展信息'
                            })}>
                                <Row>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.dealerId',
                                            defaultMessage: '总代'
                                        })} {...FORM_OPTIONS.item}
                                        validateStatus={validateDealerCode}
                                        required>
                                            {`(${data.code})${data.name}`}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.juridicalPerson',
                                            defaultMessage: '法人'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="juridicalPerson"
                                                value={dealerExtend.juridicalPerson}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.juridicalPersonPhone',
                                            defaultMessage: '法人电话'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="juridicalPersonPhone"
                                                value={dealerExtend.juridicalPersonPhone}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.juridicalPersonEmail',
                                            defaultMessage: '法人Email'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="juridicalPersonEmail"
                                                value={dealerExtend.juridicalPersonEmail}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.generalManager',
                                            defaultMessage: '总经理'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="generalManager"
                                                value={dealerExtend.generalManager}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.generalManagerPhone',
                                            defaultMessage: '总经理电话'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="generalManagerPhone"
                                                value={dealerExtend.generalManagerPhone}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.generalManagerEmail',
                                            defaultMessage: '总经理Email'
                                        })}{...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="generalManagerEmail"
                                                value={dealerExtend.generalManagerEmail}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.salesDirector',
                                            defaultMessage: '销售总监'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="salesDirector"
                                                value={dealerExtend.salesDirector}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.salesDirectorPhone',
                                            defaultMessage: '销售总监电话'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="salesDirectorPhone"
                                                value={dealerExtend.salesDirectorPhone}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.salesDirectorEmail',
                                            defaultMessage: '销售总监Email'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="salesDirectorEmail"
                                                value={dealerExtend.salesDirectorEmail}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.serviceDirector',
                                            defaultMessage: '服务总监'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="serviceDirector"
                                                value={dealerExtend.serviceDirector}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.serviceDirectorPhone',
                                            defaultMessage: '服务总监电话'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="serviceDirectorPhone"
                                                value={dealerExtend.serviceDirectorPhone}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.serviceDirectorEmail',
                                            defaultMessage: '服务总监Email'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="serviceDirectorEmail"
                                                value={dealerExtend.serviceDirectorEmail}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.marketDirector',
                                            defaultMessage: '市场总监'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="marketDirector"
                                                value={dealerExtend.marketDirector}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.marketDirectorPhone',
                                            defaultMessage: '市场总监电话'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="marketDirectorPhone"
                                                value={dealerExtend.marketDirectorPhone}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.marketDirectorEmail',
                                            defaultMessage: '市场总监Email'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="marketDirectorEmail"
                                                value={dealerExtend.marketDirectorEmail}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.financialController',
                                            defaultMessage: '财务总监'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="financialController"
                                                value={dealerExtend.financialController}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.financialControllerPhone',
                                            defaultMessage: '财务总监电话'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="financialControllerPhone"
                                                value={dealerExtend.financialControllerPhone}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.financialControllerEmail',
                                            defaultMessage: '财务总监Email'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="financialControllerEmail"
                                                value={dealerExtend.financialControllerEmail}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.incorporatedDate',
                                            defaultMessage: '公司成立日期'
                                        })} {...FORM_OPTIONS.item}>
                                            <WrappedDatePicker
                                                name="incorporatedDate"
                                                value={dealerExtend.incorporatedDate}
                                                onChange={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.arrivedAddress',
                                            defaultMessage: '收货港'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="arrivedAddress"
                                                value={dealerExtend.arrivedAddress}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem
                                            label={this.props.intl.formatMessage({
                                                id: 'editPanel.operation.openDate',
                                                defaultMessage: '开业日期'
                                            })}
                                            {...FORM_OPTIONS.item}>
                                            <WrappedDatePicker
                                                name="openDate"
                                                value={dealerExtend.openDate}
                                                onChange={this.onChangeDealerExtend}/>
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.authorisedMethod',
                                            defaultMessage: '授权方式'
                                        })} {...FORM_OPTIONS.item}>
                                            <WrappedSelect
                                                allowClear
                                                name="authorisedMethod"
                                                options={authorisedMethodList}
                                                value={dealerExtend.authorisedMethod}
                                                onChange={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.authorisedArea',
                                            defaultMessage: '授权区域'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="authorisedArea"
                                                value={dealerExtend.authorisedArea}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.onlineStatus',
                                            defaultMessage: '上线状态'
                                        })} {...FORM_OPTIONS.item}>
                                            <WrappedSelect
                                                allowClear
                                                name="onlineStatus"
                                                options={onlineStatusList}
                                                value={dealerExtend.onlineStatus}
                                                onChange={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.updatedDate',
                                            defaultMessage: '更新日期'
                                        })} {...FORM_OPTIONS.item}>
                                            <WrappedDatePicker
                                                name="updatedDate"
                                                value={dealerExtend.updatedDate}
                                                onChange={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.serviceInterfacePerson',
                                            defaultMessage: '服务接口录入人'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="serviceInterfacePerson"
                                                value={dealerExtend.serviceInterfacePerson}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.salesInterfacePerson',
                                            defaultMessage: '销售接口录入人'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="salesInterfacePerson"
                                                value={dealerExtend.salesInterfacePerson}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.salesInterfacePhone',
                                            defaultMessage: '销售接口录入人电话'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="salesInterfacePhone"
                                                value={dealerExtend.salesInterfacePhone}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.salesInterfaceEmail',
                                            defaultMessage: '销售接口录入人Email'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="salesInterfaceEmail"
                                                value={dealerExtend.salesInterfaceEmail}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.startTime',
                                            defaultMessage: '授权经营奇瑞起始时时间'
                                        })} {...FORM_OPTIONS.item}>
                                            <WrappedDatePicker
                                                name="startTime"
                                                value={dealerExtend.startTime}
                                                onChange={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.serviceInterfacePhone',
                                            defaultMessage: '服务接口录入人电话'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="serviceInterfacePhone"
                                                value={dealerExtend.serviceInterfacePhone}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'editPanel.operation.serviceInterfaceEmail',
                                            defaultMessage: '服务接口录入人Email'
                                        })} {...FORM_OPTIONS.item}>
                                            <TextInput
                                                name="serviceInterfaceEmail"
                                                value={dealerExtend.serviceInterfaceEmail}
                                                onBlur={this.onChangeDealerExtend} />
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Card>
    
                        }
                        <Card
                            title={formatMessage({
                                id: 'updatePanel.personnel',
                                defaultMessage: '人员清单'
                            })}
                            extra={<Button size="small" onClick={this.onClickSearchPersonnelBtn}>
                                {this.props.intl.formatMessage({
                                    id: 'editPanel.personnel.addDetail',
                                    defaultMessage: '新增清单'
                                })}</Button>}>
                            <Table
                                className="white-space-nowrap"
                                columns={colums}
                                rowKey="id"
                                pagination={false}
                                dataSource={personnels}
                                {...TABLE} />
                        </Card>
                        <Card type="inner">
                            <Row>
                                <Col disabled={!submitable} className="col-align-right">
                                    <Button key="submit" loading={this.state.loading}
                                        onClick={this.onSubmit} type="primary">{formatMessage({
                                            id: 'editPanel.submit',
                                            defaultMessage: '保存'
                                        })}</Button>
                                </Col>
                            </Row>
                        </Card>
                    </Form>
                </Spin>
                {
                    this.state.showPersonnelSelectPanel &&
                    <PersonnelSelectPanel
                        selectKey={`(${data.code})${data.name}`}
                        onCancel={this.onClosePersonnelSelectPanel}
                        onSelect={this.onSelectAddedPersonnel} />
                }
                <div className="page-toolbar">
                    <Return
                        onConfirm={this.onClickReturnBtn}
                        disabled={this.state.loading}
                        showWarning={this.state.hasOperat} />
                </div>
            </div>
        );
    }
}

const EMPTY_OBJECT = {};

UpdatePanel.defaultProps = {
    allowClear: true,
    searchOnFocus: true,
    getDealer: api.getDealers,
    getRegions: api.getRegions,
    getMarketDepartments: api.getMarketDepartments,
    conditions: EMPTY_OBJECT
};

UpdatePanel.propTypes = {
    successReturn: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
    history: PropTypes.object,
    intl: PropTypes.object,
    pagePermission: PropTypes.array
};
import {connect} from 'react-redux';
import {
    tableSearch,
} from './actions';
import {selectorFactory} from 'Shared/utils/immutableToJsSelectorFactory';
const getPagePermission = selectorFactory(['page', 'domainData', 'permissions', 'data']);

const mapStateToProps = state => ({
    pagePermission: getPagePermission(state),
});

const mapDispatchToProps = (dispatch, props) => ({
    onCancel: () => props.history.push(routes.query.url()),
    successReturn: () => {
        dispatch(tableSearch());
        props.history.push(routes.query.url());
    },
});

export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(UpdatePanel));
